<template>
  <t-loading :loading="loading">
    <t-form v-if="type === 'detail'" label-align="left" ref="form" colon :data="formData">
      <t-space size="large" direction="vertical" style="width: 90%; margin: 0 5%">
        <t-row style="align-items: stretch" :gutter="[16, 16]" justify="space-around">
          <t-col :xs="12" :xl="6">
            <t-form-item label="项目名称" name="projectName">
              {{ formData.projectName }}
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="项目经费" name="projectMoney"> {{ formData.projectMoney }}万元 </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="回收时间" name="recoveryDate"> {{ formData.recoveryDate }} </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="已使用金额" name="usedAmount"> {{ formData.usedAmount }}万元 </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="已回收金额" name="recoveryAmount"> {{ formData.recoveryAmount }}万元 </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6"> </t-col>
          <t-col :xs="12" :xl="12">
            <t-form-item label="说明" name="note"> <div v-html="formData.note"></div> </t-form-item>
          </t-col>
        </t-row>
      </t-space>
    </t-form>
    <t-form v-else label-align="left" ref="form" colon :data="formData" :rules="rules">
      <t-space size="large" direction="vertical" style="width: 90%; margin: 0 5%">
        <t-row style="align-items: stretch" :gutter="[16, 16]" justify="space-around">
          <t-col :xs="12" :xl="6">
            <t-form-item label="项目名称" name="projectName">
              <t-select style="width: 70%" :options="projectNameOptions" clearable v-model="formData.projectName" />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="项目经费" name="projectMoney">
              <t-input-number
                disabled
                style="width: 70%"
                :step="step"
                clearable
                v-model="formData.projectMoney"
                :min="0"
                suffix="万元"
              />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="回收时间" name="recoveryDate">
              <t-date-picker style="width: 70%" clearable v-model="formData.recoveryDate"> </t-date-picker>
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="已使用金额" name="usedAmount">
              <t-input-number
                style="width: 70%"
                :step="step"
                clearable
                v-model="formData.usedAmount"
                :min="0"
                suffix="万元"
              />
            </t-form-item>
          </t-col>
          <t-col :xs="12" :xl="6">
            <t-form-item label="已回收金额" name="recoveryAmount">
              <t-input-number
                style="width: 70%"
                :step="step"
                clearable
                v-model="formData.recoveryAmount"
                :min="0"
                suffix="万元"
              />
            </t-form-item>
          </t-col>
          <t-col :xl="6"></t-col>
          <t-col :xs="12" :xl="12">
            <t-form-item label="说明" name="note">
              <tiny-mce-editor v-model="formData.note"></tiny-mce-editor>
            </t-form-item>
          </t-col>
        </t-row>
      </t-space>
    </t-form>
  </t-loading>
</template>
    
<script>
import TinyMceEditor from '@/components/TinyMceEditor/index.vue';

export default {
  name: 'add-edit-detail',
  components: {
    TinyMceEditor,
  },
  props: {
    objId: [String, Number],
    header: String,
    type: {
      type: String,
      default: 'add',
    },
  },
  data() {
    return {
      rules: {
        projectName: [{ required: true, message: '项目名称不能为空' }],
        projectMoney: [{ required: true, message: '项目经费不能为空' }],
        recoveryDate: [{ required: true, message: '回收时间不能为空' }],
        usedAmount: [{ required: true, message: '已使用金额不能为空' }],
        recoveryAmount: [{ required: true, message: '已回收金额不能为空' }],
        note: [{ required: true, message: '说明不能为空' }],
      },
      step: 0.5,
      formData: {
        projectName: '',
        projectMoney: 0,
        recoveryDate: '',
        usedAmount: 0,
        recoveryAmount: 0,
        note: '',
      },
      loading: false,
      projects: [],
      projectNameOptions: [],
    };
  },
  watch: {
    'formData.projectName': {
      handler(val) {
        this.formData.projectId = this.projects.find((row) => row.projectName === val)?.id;
        if (this.type === 'add') {
          this.formData.projectMoney = this.projects.find((row) => row.projectName === val)?.adviceFunding;
        }
      },
      immediate: true,
    },
  },
  created() {
    if (this.type !== 'add') {
      this.$api.kjxm.expenditure
        .fundRecoveryDetail(this.objId)
        .then((res) => {
          Object.assign(this.formData, res.data);
          this.$forceUpdate();
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    } else {
      this.$api.kjxm.project
        .myList()
        .then((res) => {
          this.projects.push(...res.rows);
          res.rows.forEach((row) => {
            this.projectNameOptions.push({ label: row.projectName, value: row.projectName });
          });
        })
        .catch((e) => {
          this.$message.error(e.toString());
        });
    }
  },
  methods: {
    submit() {
      this.$refs.form.validate().then((validateResult) => {
        if (validateResult === true) {
          this.loading = true;
          if (this.type === 'add') {
            this.$api.kjxm.expenditure
              .addFundRecovery(this.formData)
              .then(() => {
                this.$message.success('新增成功');
                this.$emit('reload');
                this.loading = false;
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.toString());
              });
          } else {
            this.$api.kjxm.expenditure
              .updateFundRecovery(this.formData)
              .then(() => {
                this.$message.success('修改成功');
                this.$emit('reload');
                this.loading = false;
              })
              .catch((e) => {
                this.loading = false;
                this.$message.error(e.toString());
              });
          }
        }
      });
    },
  },
};
</script>
